<!--
*@Author: QWP
*@Description: 顶部汇总数据及工具
*@Date: 2024-10-31 14:25:05
-->
<template>
  <a-row class="u-top-all-data" 
    :gutter="16" 
    style="position: absolute; width: 100%; top: 8px; left: 16px">
    <a-col :xxl="5" :xl="6" :lg="8" :md="9" :sm="10" 
      v-for="item in data"
      :style="{ 'border-color': item.borderColor, '--mainc': item.borderColor }"
      class="f-margin-r8 u-top-item-card"
      :class="{'u-all-item-active': nowCurrentItem == item.type && isNext == '2'}"
      @click="allItemClick(item)">
      <a-row :gutter="8">
        <a-col>
          <div class="f-flex-column f-h-100"
            style="justify-content: center;">
            <img :src="item.img" width="54px"/>
          </div>
        </a-col>
        <a-col flex="1">
          <a-space direction="vertical" :size="8">
            <span class="u-label-text">{{ item.label }}</span>
            <span :title="item.value + item.unit"
              class="f-span-no-wrap">
              <span class="u-value-text">{{ item.value }}</span>
              <span class="u-unit-label">{{ item.unit }}</span>
            </span>
          </a-space>
        </a-col>
      </a-row>
    </a-col>
    <a-col flex="1">
      <div class="f-flex-column" 
        style="align-items: flex-end">
        <div class="u-sel-box" v-if="isNext != '1'">
          <u-select v-model:value="companyType"
            :options="options"
            placeholder="企业类型"
            :allowClear="true"
            :showArrow="false"
            @deselect="isFocus = false"
            @select="isFocus = false"
            @blur="isFocus = false"
            @focus="isFocus = true"
            @change="(value) => emits('search', value)">
          </u-select>
          <div class="u-sel-btn"
            @click="emits('search', companyType)">
            <img class="u-arrow-focus" 
              :style="{'--rotate': isFocus ? '-180deg' : '0'}"
              :src="urlFile('map/warn-sel.png')" />
          </div>
        </div>
        <u-icon-button class="f-fr f-margin-t10 f-margin-r16" 
          v-if="isNext != '1'"
          @click="emits('click')">返回上级地图</u-icon-button>
        </div>
    </a-col>
  </a-row>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch } from 'vue' 
import { useBaseStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { urlFile } from '@/util/common';
// import warn-type-img from '@/ass'
const props = defineProps<{
  data: any | any[],
  isNext: string
}>()
const emits = defineEmits(['itemClick', 'click', 'search'])

const { noCarbonCompanyType } = useBaseStore()

const nowCurrentItem = ref<string>('')

const options = [
  {label: '非煤', value: '1'},
  {label: '煤矿', value: '2'},
  {label: '危化', value: '3'},
  {label: '安全生产检查重大隐患', value: '4'},
]

const companyType = ref<string>('')
const isFocus = ref<boolean>(false)

const allItemClick = (item) => {
  if(['team', 'firm'].includes(item.type)) {
    nowCurrentItem.value = item.type == nowCurrentItem.value ? '' : item.type;
  } else {
    nowCurrentItem.value = ''
  }
  emits('itemClick', item)
}

watch(() => props.isNext, (nval) => {
  nowCurrentItem.value = ''
  companyType.value = ''
}, { immediate: true })
</script>

<style lang='scss'>
.u-sel-box {
  float: right !important;
  display: flex;
  margin-right: 16px;
  width: 230px;
  .ant-select-selector{
    border-radius: 25px 0 0 25px;
  }
  .u-sel-btn {
    padding: 0 8px;
    border-radius: 0 25px 25px 0;
    background: #1890FF;
    cursor: pointer;
    &:hover {
      background-color: #4096ff;
      box-shadow: 0 2px 0 rgb(5 145 255 / 10%);
    }
  }
  .u-arrow-focus {
    transform: rotate(var(--rotate));
    transition: all 0.5s
  }
}
.u-top-all-data {
  z-index: 100;
  .u-label-text{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }
  .u-value-text {
    font-family: DIN Medium, DIN Medium;
    font-weight: 500;
    font-size: .3rem;
    color: #333333;
    line-height: 25px;
    text-align: left;
  }
  .u-unit-label {
    margin-left: 3px;
    font-family: PingFang SC-Medium;
    font-weight: 400;
    font-size: 12px;
    color: #666;
    line-height: 25px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }
  .u-top-item-card {
    width: 100%;
    padding: .1rem; 
    border: 2px solid; 
    border-radius: 16px; 
    background: rgba(255,255,255,0.8)
  }
  .u-all-item-active {
    $color: var(--mainc);
    span {
      color: $color
    }
    // background: rgba(24, 144 ,255, .2);
  }
}
</style>